<template>
  <div class="right-top" ref="target"></div>
</template>

<script setup>
import { onMounted, ref, defineProps } from "vue";
import * as echarts from "echarts";
const props = defineProps({
  gammaReconfiguration: {
    type: Array,
    required: true,
  },
  gamma: {
    type: Array,
    required: true,
  },
  file_id_show: {
    type: Array,
    required: true,
  },
});
const target = ref(null);
let mChart = null;
onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});
const renderChart = () => {
  let options = {
    title: {
      text: "递减顺序排列的聚类中心指标图",

      textStyle: {
        color: "white",
      },
    },
    grid: {
      left: 50,
      top: 50,
      bottom: 26,
      right: 26,
    },
    color: "red",
    xAxis: {
      axisLabel: {
        color: "white",
      },
      name: "n",
      nameLocation: "center",
      nameTextStyle: {
        padding: [1, 0, 20, 0],
      },
    },
    yAxis: {
      axisLabel: {
        color: "white",
      },
      name: "聚类中心指标γ",
      nameLocation: "center",
      nameTextStyle: {
        padding: [0, 0, 20, 0],
      },
    },
    series: [
      {
        symbolSize: 10,
        data: props.gammaReconfiguration,
        type: "scatter",
      },
    ],
  };
  let options1 = {
    title: {
      text: "递减顺序排列的聚类中心指标图",

      textStyle: {
        color: "white",
      },
    },
    backgroundColor: "#081736",
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: "15%",
      right: "5%",
      left: "10%",
      bottom: "10%",
    },

    xAxis: [
      {
        // name: "月",
        type: "category",
        axisLabel: {
          color: "#fff",
        },
        // axisLine: {
        //   show: true,
        //   lineStyle: {
        //     color: "#fff",
        //   },
        // },
        // axisTick: {
        //   show: false,
        // },
        // splitLine: {
        //   show: false,
        //   lineStyle: {
        //     color: "#195384",
        //     type: "dotted",
        //   },
        // },
        data: props.file_id_show.map((item, index) => {
          return index;
        }),
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "电压曲线相似度指标",
        nameLocation: "center",
        nameTextStyle: {
          padding: [0, 0, 10, 0],
          color: "white",
        },
        // name: "销量(万元)",
        // min: 0,
        // position: "left",
        // nameTextStyle: {
        //   color: "#fff",
        //   fontSize: 11,
        // },
        // axisLine: {
        //   show: true,
        //   lineStyle: {
        //     color: "#fff",
        //   },
        // },
        // axisTick: {
        //   show: false,
        // },
        // splitLine: {
        //   show: true,
        //   lineStyle: {
        //     color: "#0a3e98",
        //     type: "dotted",
        //   },
        // },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        // name: "销量",
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 10,
        lineStyle: {
          normal: {
            color: "#1890ff",
          },
        },
        // label: {
        //   show: true,
        //   position: "top",
        //   textStyle: {
        //     color: "#fff",
        //   },
        // },
        itemStyle: {
          color: "#fff",
          borderColor: "#1890ff",
          borderWidth: 3,
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#1890ff",
                },
                {
                  offset: 1,
                  color: "RGBA(127, 76, 239, 0.2)",
                },
              ],
              false
            ),
            shadowColor: "RGBA(80, 38, 72, 0.2)",
            shadowBlur: 20,
          },
        },
        data: props.gamma,
      },
    ],
  };
  mChart.setOption(options1);
};
window.addEventListener("resize", function () {
  mChart.resize();
});
</script>

<style lang="scss" scoped>
.right-top {
  width: 95%;
  height: 95%;
  padding: 20px;
}
</style>
